<template>
  <el-dialog
    title="修改升级包"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
  >
    <el-form
      @keyup.enter.native="update"
      ref="editDataForm"
      :model="dataForm"
      label-width="200px"
      :show-message="false"
    >
      <el-form-item
        label="上传升级包"
        prop="packageUrl"
        required
      >
        <!-- <el-input
          class="input"
          v-model="dataForm.packageUrl"
        ></el-input> -->
        <upgrade-file-upload
          class="upgrade-file-upload"
          ref="upgradeFileConponent"
          v-model="dataForm.packageUrl"
          @file-size="handlerFileSize"
          @file-name="handlerFileName"
        ></upgrade-file-upload>
      </el-form-item>
      <el-form-item
        label="名称"
        prop="name"
        required
      >
        <el-tooltip
          class="el-tooltip"
          content="升级包的名称"
          effect="light"
        >
          <i class="el-icon-question"></i>
        </el-tooltip>
        <el-input
          class="input"
          v-model="dataForm.name"
          placeholder="请输入名称"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="版本号"
        prop="versionName"
        required
      >
        <el-tooltip
          class="el-tooltip"
          content="升级包的版本号，仅支持Major.Minor.Build格式，如1.0.0"
          effect="light"
        >
          <i class="el-icon-question"></i>
        </el-tooltip>
        <el-input
          class="input"
          v-model="dataForm.versionName"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="产品类型"
        prop="deviceTypeUuid"
      >
        <el-tooltip
          class="el-tooltip"
          content="升级包所属的产品类型"
          effect="light"
        >
          <i class="el-icon-question"></i>
        </el-tooltip>
        <el-select
          class="input"
          v-model="dataForm.deviceTypeUuid"
          filterable
          remote
          reserve-keyword
          :remote-method="remoteDeviceTypeSearch"
          :loading="remoteLoading"
          clearable
          @focus="remoteDeviceTypeSearch()"
        >
          <el-option
            class="input"
            v-for="deviceType in deviceTypeList"
            :key="deviceType.uuid"
            :label="deviceType.name"
            :value="deviceType.uuid"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="允许升级"
        prop="active"
        required
      >
        <el-tooltip
          class="el-tooltip"
          content="升级包是否允许升级"
          effect="light"
        >
          <i class="el-icon-question"></i>
        </el-tooltip>
        <el-select
          class="input"
          v-model="dataForm.active"
        >
          <el-option
            class="input"
            v-for="active in activeOptionList"
            :key="active.value"
            :label="active.label"
            :value="active.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label="备注"
        prop="description"
      >
        <el-tooltip
          class="el-tooltip"
          content="升级包的备注信息"
          effect="light"
        >
          <i class="el-icon-question"></i>
        </el-tooltip>
        <el-input
          class="input"
          v-model="dataForm.description"
          placeholder="请输入备注"
        ></el-input>
      </el-form-item>
    </el-form>
    <span
      slot="footer"
      class="dialog-footer"
    >
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button
        type="primary"
        @click="update"
        :loading="btnLoading"
      >确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import UpgradeFileUpload from '../../../components/UpgradeFileUpload';
import { queryProductTypeListApi } from '../../../api/productType';
import { updatePackageApi } from '../../../api/package';
import { Message } from 'element-ui';
import { parseError } from '../../../utils';
import { loginApi } from '../../../api/user';

export default {
  components: {
    UpgradeFileUpload
  },
  data() {
    this.id = '';
    this.formLabelWidth = '120px';
    return {
      activeOptionList: [
        {
          label: '允许',
          value: true
        },
        {
          label: '不允许',
          value: false
        }
      ],
      dataForm: {
        remoteLoading: false,
        name: '',
        description: '',
        versionName: '',
        packageUrl: '',
        size: '',
        deviceTypeUuid: '',
        active: true
      },
      dialogVisible: false,
      btnLoading: false,
      deviceTypeList: []
    };
  },
  watch: {
    dialogVisible: {
      handler(value) {
        if (!value) {
          this.$refs.editDataForm.resetFields();
          this.$refs.upgradeFileConponent.clearFilelist();
          this.id = '';
        }
      }
    }
  },
  methods: {
    showDialog(row) {
      this.remoteDeviceTypeSearch();
      this.id = row.id;
      Object.assign(this.dataForm, {
        name: row.name,
        description: row.description,
        versionName: row.versionName,
        deviceTypeUuid: row.deviceTypeUuid,
        packageUrl: row.packageUrl,
        size: row.size,
        active: row.active
      });
      this.dialogVisible = true;
    },
    update() {
      this.btnLoading = true;
      updatePackageApi(
        this.id,
        this.dataForm.name,
        this.dataForm.description,
        this.dataForm.versionName,
        this.dataForm.packageUrl,
        this.dataForm.size,
        this.dataForm.active,
        this.dataForm.deviceTypeUuid
      )
        .then(res => {
          Message.success('更新成功');
          this.dialogVisible = false;
          this.$emit('refresh');
        })
        .catch(error => Message.error(parseError(error)))
        .finally(() => (this.btnLoading = false));
    },
    remoteDeviceTypeSearch(name) {
      queryProductTypeListApi(name, 100)
        .then(
          res =>
            (this.deviceTypeList = res.map(deviceType => {
              return {
                uuid: deviceType.uuid,
                name: deviceType.name
              };
            }))
        )
        .catch(error => Message.error(parseError(error)));
    },
    handlerFileSize(fileSize) {
      this.dataForm.size = fileSize;
    },
    handlerFileName(fileName) {
      if (fileName.includes('_V')) {
        const [name, vname] = fileName.trim().split('_V');
        this.dataForm.name = name;
        const handlerArr = vname.split('.');
        let version = '';
        for (let i = 0; i < handlerArr.length - 1; i++) {
          version += handlerArr[i] + '.';
        }
        this.dataForm.versionName = version.slice(0, version.length - 1);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.input {
  width: 300px;
}
.el-tooltip {
  margin-right: 10px;
}
/deep/.upgrade-file-upload {
  margin-left: 22px;
}
</style>
